<template>
  <div>
    <div class="list_warp">
      <div
        class="list_item"
        @click="goDetails(item.id)"
        v-for="(item,index) in goodsList"
        :key="index"
      >
        <div class="list_left">
          <img :src="item.image" alt />
        </div>
        <div class="list_right">
          <div class="list_right_tit">
            <div>{{item.title}}</div>
          </div>
          <div class="list_right_type">{{item.description}}</div>
          <div class="time">{{item.updatetime|formatDate }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script >
export default {
  name: "gg",
  data() {
    return {};
  },
  props: ["goodsList"],
  methods: {
    goDetails(item) {
      console.log(item);
      // this.$router.push({ path: "/details", query: { item: item } });    },
      // this.$router.replace({ name: "/details", params: { item: item } });
      const { href } = this.$router.resolve({
        path: "/details",
        query: {
          item: JSON.stringify(item)
        }
      });
      window.open(href, "_blank");
    },
    mounted() {},
    components: {}
  },
  filters: {
    formatDate(data) {
      var now = new Date(data);
      var year = now.getFullYear(); //取得4位数的年份
      var month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
      var date = now.getDate(); //返回日期月份中的天数（1到31）
      console.log(month,date)
      var hour = now.getHours(); //返回日期中的小时数（0到23）
      var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
      var second = now.getSeconds(); //返回日期中的秒数（0到59）
      return (
        year +
        "." +
        //  month +
        (month.toString().length>1?month:'0'+month )+
        "." +
        (date.toString().length>1?date:'0'+date )
        // " " +
        // hour +
        // ":" +
        // minute +
        // ":" +
        // second
      );
    }
  }
};
</script>
<style scoped lang='less'>
.list_warp {
  min-height: 600px;
  display: flex;
  flex-wrap: wrap;
  width: 1180px;
  margin: 0 auto;
  padding: 40px 0;
  .list_item {
    background: #fff;
    margin: 40px 10px;
    width: 356px;
    box-shadow: 0px 4px 6px 0px rgba(0, 118, 254, 0.09);
    border-radius: 9px 9px 5px 5px;
    box-sizing: border-box;
    padding-bottom: 10px;
    border-bottom: 2px dashed #f2f2f2;
    .list_left {
      img {
        width: 100%;
        height: 640px;
        border-radius: 2px;
      }
      div {
        font-size: 24px;
        color: #999;
        text-align: center;
      }
    }
    .list_right {
      flex: 1;
      padding: 12px 30px 10px 26px;

      .list_right_tit {
        display: flex;
        justify-content: space-between;
        margin: 5px 0;
        display: -webkit-box;
        color: #333;
        font-size: 24px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      .list_right_type {
        color: #666666;
        font-size: 20px;
        display: -webkit-box;
        height: 60px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .time {
        color: #666666;
        margin-top: 20px;
      }
      .list_right_state {
        display: flex;
        color: #999999;
        font-size: 22px;
        margin-bottom: 24px;
        div {
          margin-right: 10px;
          padding: 2px 8px;
          background: #f2f2f2;
          border-radius: 18px;
        }
      }
    }
  }
}
</style>
